<template>
    <div class="contianer">
        <div class="top">
            <p class="ziti">实时游客统计</p>
              <p class="bg"></p>
                <p class="people"><span>8989</span>人</p>
          
        </div>
        <div class="shuji">
            <span v-for="(item,index ) in perole" :key="index">{{ item }}</span>

        </div>
        <div ref="shuiqiu" style="  height: 200px; margin-top:-20px ;">132</div>
    </div>
</template>
<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

const shuiqiu=ref<any>();

onMounted(() => {
    
    let mycharts=echarts.init(shuiqiu.value)
    console.log(mycharts)
mycharts.setOption({
series: [{
type: 'liquidFill',
data: [0.6,0.5,0.4], // 数据值，介于0到1之间
radius: '90%', // 水球图的半径
center: ['50%', '50%'], // 水球图的中心位置
shape: 'circle', // 水球图的形状
waveAnimation: true, // 是否开启波浪动画
itemStyle: {
color: '#294D99', // 波浪颜色
opacity: 0.5, // 波浪透明度
},
outline: {
show: true,
borderDistance: 8,
itemStyle: {
borderColor: '#294D99',
borderWidth: 6,
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.25)'
}
},
backgroundStyle: {
color: '#E3F7FF'
},
label: {
show: true,
color: '#294D99',
insideColor: '#fff',
fontSize: 40,
fontWeight: 'bold',
align: 'center',
baseline: 'middle',
position: 'inside',

}
}]
}

)

});

const perole=ref('216908人')
</script>
<style scoped lang="scss">
.contianer{
    background-image: url(../../images/dataScreen-main-lb.png) ;
    background-size: 100%  100%;
    margin-top:20px ;
}
.top{
    margin-top:10px ;
    
    .ziti{
        color: #ffffff;
        font-size: 20px;
    }
    .bg{
        width: 60px;
        height: 10px;
        background-image: url(../../images/dataScreen-title.png);
        background-size: 100% 100%;
        margin: 10px;
    }
    .people{
         color: #ffffff;
        font-size: 20px;
        float: right;
        right: 200px;
       
       
       
        span{
          color: yellowgreen;
          
       }
        

    }
}
.shuji{
     display: flex;
    margin: 70px 40px;
    top: 10px;
        
    span{
        font-size: 40px;
        color:#29fcff;
       width: 40px;
        height:40px;
        text-align: center;
        line-height: 40px;
       margin-left: 10px;
         background-image: url(../../images/total.png);
         background-size: 100% 100%;
    }
   
}
</style>